<a href="#" class="group block">
  <img
    src="https://images.unsplash.com/photo-1592921870789-04563d55041c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
    alt=""
    class="h-[350px] w-full object-cover sm:h-[450px]"
  />

  <div class="mt-1.5">
    <p class="text-xs text-gray-500">Space Grey</p>

    <div class="mt-1.5 flex gap-1">
      <form>
        <fieldset>
          <legend class="sr-only">Color</legend>
        </fieldset>

        <div class="flex flex-wrap justify-center gap-1 [&:hover_label]:opacity-75">
          <div>
            <input type="checkbox" id="ColorSg" class="sr-only" />

            <label
              for="ColorSg"
              class="block size-4 cursor-pointer rounded-full bg-[#595759] transition hover:!opacity-100"
            >
              <span class="sr-only"> Space Gray </span>
            </label>
          </div>

          <div>
            <input type="checkbox" id="ColorS" class="sr-only" />

            <label
              for="ColorS"
              class="block size-4 cursor-pointer rounded-full bg-[#d2d3d4] transition hover:!opacity-100"
            >
              <span class="sr-only"> Silver </span>
            </label>
          </div>

          <div>
            <input type="checkbox" id="ColorP" class="sr-only" />

            <label
              for="ColorP"
              class="block size-4 cursor-pointer rounded-full bg-[#d89f97] transition hover:!opacity-100"
            >
              <span class="sr-only"> Pink </span>
            </label>
          </div>

          <div>
            <input type="checkbox" id="ColorG" class="sr-only" />

            <label
              for="ColorG"
              class="block size-4 cursor-pointer rounded-full bg-[#afbfab] transition hover:!opacity-100"
            >
              <span class="sr-only"> Pink </span>
            </label>
          </div>

          <div>
            <input type="checkbox" id="ColorSb" class="sr-only" />

            <label
              for="ColorSb"
              class="block size-4 cursor-pointer rounded-full bg-[#91a5bb] transition hover:!opacity-100"
            >
              <span class="sr-only"> Pink </span>
            </label>
          </div>
        </div>
      </form>
    </div>

    <div class="mt-3 flex justify-between text-sm">
      <h3 class="text-gray-900 group-hover:underline group-hover:underline-offset-4">
        Small Headphones
      </h3>

      <p class="text-gray-900">$299</p>
    </div>
  </div>
</a>
